<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="currentTab" align-center finish-status="success">
          <el-step title="商品信息"/>
          <el-step title="商品详情"/>
          <el-step title="其他设置"/>
          <!--<el-step title="规格设置" />-->
        </el-steps>
      </div>
      <el-form ref="formValidate" v-loading="isLoading" class="formValidate mt20" :rules="ruleValidate" :model="formValidate" label-width="120px" @submit.native.prevent>
        <el-row v-show="currentTab === 0" :gutter="24">
          <!-- 商品信息-->
          <el-col v-bind="grid2">
            <el-form-item label="商品名称：" prop="name">
              <el-input v-model="formValidate.name" maxlength="249" placeholder="请输入商品名称"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品分类：" prop="commodityTypeId">
              <treeselect v-model="formValidate.commodityTypeId" :options="commodityTypeOptions" :normalizer="normalizer" placeholder="选择商品类型" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品关键字：" prop="keywords">
              <el-input v-model="formValidate.keywords" placeholder="请输入商品关键字"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="单位：" prop="unit">
              <el-input v-model="formValidate.unit" placeholder="请输入单位"/>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品简介：" prop="description">
              <el-input v-model="formValidate.description" type="textarea" maxlength="250" :rows="3" placeholder="请输入商品简介"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="currentTab === 1" :gutter="24">
          <el-col v-bind="grid2">
            <el-form-item label="价格：" prop="price">
              <el-input v-model="formValidate.price" placeholder="请输入价格" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="库存：" prop="stock">
              <el-input v-model="formValidate.stock" placeholder="请输入库存" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="市场价格：" prop="marketPrice">
              <el-input v-model="formValidate.marketPrice" placeholder="请输入市场价格" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="成本价格：" prop="costPrice">
              <el-input v-model="formValidate.costPrice" placeholder="请输入成本价格" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="虚拟销量：" prop="virtualSales">
              <el-input v-model="formValidate.virtualSales" placeholder="请输入虚拟销量" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="积分：" prop="score">
              <el-input v-model="formValidate.score" placeholder="请输入积分" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-show="currentTab === 2" :gutter="24">
          <el-col v-bind="grid2"  :push="10">
            <div style="font-size: 40px; font-weight: bold;">确认提交</div>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button v-show="currentTab>0" class="submission priamry_border" @click="handleSubmitUp">上一步</el-button>
          <el-button v-show="currentTab<2" type="primary" class="submission" @click="handleSubmitNest('formValidate')">下一步</el-button>
          <el-button v-show="(currentTab===2 || $route.params.id)" type="primary" class="submission" @click="handleSubmit('formValidate')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { addCommodity } from '../../../../api/commodity/commodity'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { listCommodityType } from '../../../../api/commodity/commodityType'

const defaultObj = {
  commodityId: null,
  price: null,
  salesNumber: null,
  stock: null,
  orderNum: null,
  status: null,
  marketPrice: null,
  costPrice: null,
  collectNumber: null,
  virtualSales: null,
  name: null,
  keywords: null,
  description: null,
  unit: null,
  score: null,
  commodityTypeId: null
}
export default {
  name: 'Form',
  components: { Treeselect },
  created() {
      listCommodityType().then(response => {
        this.commodityTypeOptions = this.handleTree(response.data, "commodityTypeId");
      });
  },
  data() {
    return {
      commodityTypeOptions: [],
      form: {},
      isLoading: false,
      currentTab: 0,//进度条页面控制
      formValidate: Object.assign({}, defaultObj),
      ruleValidate: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' }
        ],
        commodityTypeId: [
          { required: true, message: '请选择商品分类', trigger: 'change'}
        ],
        keywords: [
          { required: true, message: '请输入商品关键字', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '请输入单位', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入商品简介', trigger: 'blur' }
        ],
        // image: [
        //   { required: true, message: '请上传商品图', trigger: 'change' }
        // ]
        tempRoute: {}
      },
      grid2: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      }
    }
  },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.commodityTypeId,
        label: node.commodityTypeName,
        children: node.children
      };
    },
    handleSubmitUp() {
      // this.currentTab --
      if (this.currentTab-- < 0) this.currentTab = 0
    },
    handleSubmitNest(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.currentTab++ > 2) this.currentTab = 0
        } else {
          if (!this.formValidate.name || !this.formValidate.commodityTypeId || !this.formValidate.keyword
            || !this.formValidate.unit || !this.formValidate.description) {
            this.$message.warning('请填写完整商品信息！')
          }
        }
      })
    },
    handleSubmit(date){
      this.$refs["formValidate"].validate(valid => {
        if (valid) {
          addCommodity(this.formValidate).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.$router.push('/index');
            });
        }
      });
    }

  }

}

</script>
<style scoped lang="scss">
.disLabel {
  ::v-deep.el-form-item__label {
    margin-left: 36px !important;
  }
}

.disLabelmoren {

  ::v-deep.el-form-item__label {
    margin-left: 120px !important;
  }

}

.priamry_border {
  border: 1px solid #1890FF;
  color: #1890FF;
}

.color-item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #fff;
  margin-right: 10px;
}

.color-list .color-item.blue {
  background-color: #1E9FFF;
}

.color-list .color-item.yellow {
  background-color: rgb(254, 185, 0);
}

.color-list .color-item.green {
  background-color: #009688;
}

.color-list .color-item.red {
  background-color: #ed4014;
}

.proCoupon {
  ::v-deep.el-form-item__content {
    margin-top: 5px;
  }
}

.tabPic {
  width: 40px !important;
  height: 40px !important;

  img {
    width: 100%;
    height: 100%;
  }

}

.noLeft {

  ::v-deep.el-form-item__content {
    margin-left: 0 !important;
  }
}

.tabNumWidth {

  ::v-deep.el-input-number--medium {
    width: 121px !important;
  }

  ::v-deep.el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }

  ::v-deep.el-input-number__decrease {
    width: 20px !important;
    font-size: 12px !important;
  }

  ::v-deep.el-input-number--medium .el-input__inner {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }

  ::v-deep thead {
    line-height: normal !important;
  }

  ::v-deep .el-table .cell {
    line-height: normal !important;
  }

}

.selWidth {
  width: 100%;
}

.selWidthd {
  width: 300px;
}

.button-new-tag {
  height: 28px;
  line-height: 26px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;
  position: relative;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }

  video {
    width: 100%;
    height: 100%;
  }

}

.btndel {
  position: absolute;
  z-index: 1;
  width: 20px !important;
  height: 20px !important;
  left: 46px;
  top: -4px;
}

.labeltop {

  ::v-deep.el-form-item__label {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
  }

}

.iview-video-style {
  width: 300px;
  height: 180px;
  border-radius: 10px;
  background-color: #707070;
  margin: 0 120px 20px;
  position: relative;
  overflow: hidden;
}

.iview-video-style .iconv {
  color: #fff;
  line-height: 180px;
  width: 50px;
  height: 50px;
  display: inherit;
  font-size: 26px;
  position: absolute;
  top: -74px;
  left: 50%;
  margin-left: -25px;
}

.iview-video-style .mark {
  position: absolute;
  width: 100%;
  height: 30px;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}
</style>
